<template>
  <div>
    <vue-ruler-tool :parent="true">
      <div>
        <drag
          v-for="(group, index) in myArray"
          class="drag"
          :key="index"
          :transfer-data="{ ...group, example: 'groups' }"
          @dragstart="dragstart"
          @dragend="dragend"
        >{{ group }}</drag>
      </div>
      <div class="container-wrapper">
        <drop @dragover="handleDragover" @drop="handleDrop" class="container">
          <vue-draggable-resizable
            :enable-native-drag="false"
            :is-conflict-check="true"
            :x="element.x || 0"
            :y="element.y || 0"
            :ref="`ref_${index}`"
            @dragging="onDrag(index, ...arguments)"
            @resizing="onResize(index, ...arguments)"
            v-for="(element, index) in myArray2"
            :key="index"
            :parent="true"
          >
            <div>
              <p>
                {{ element.name }}
                <br />
                X: {{ element.x }} / Y: {{ element.y }} - Width:
                {{ element.width }} / Height: {{ element.height }}
              </p>
            </div>
          </vue-draggable-resizable>
        </drop>
      </div>
    </vue-ruler-tool>
  </div>
</template>

<script>
import { Drag, Drop } from "vue-drag-drop";
export default {
  components: { Drag, Drop },
  data: function() {
    return {
      groups: ["A", "B", "C"],
      dragging: null,
      myArray: [
        { id: 1, name: "element 1", width: 200, height: 200 },
        { id: 2, name: "element 2", width: 200, height: 200 },
        { id: 3, name: "element 3", width: 200, height: 200 },
        { id: 4, name: "element 4", width: 200, height: 200 }
      ],
      myArray2: [],
      dataTransferData: null
    };
  },
  methods: {
    handleDragover(event) {
      //let data = this.dataTransferData;
      console.log("data: ", event);

      //this.myArray2.push(data);
    },
    handleDrop(data1, event) {
      let data = {
        ...this.dataTransferData,
        x: event.offsetX - this.dataTransferData.srcX,
        y: event.offsetY - this.dataTransferData.srcY
      };
      console.log("data: ", data, data1, event);

      const index = this.myArray2.length;

      this.myArray2.push(data);

      this.$nextTick(() => {
        console.log(this.$refs, index, "nexttick.......");
      });
    },
    dragstart(data, event) {
      console.log("dragstart", data, event);
      // event.dataTransfer.setData("item", data);
      this.dataTransferData = {
        ...data,
        srcX: event.offsetX,
        srcY: event.offsetY
      };
    },
    dragend(event) {
      console.log("drag", event);
      /// event.dataTransfer.clearData();
      this.dataTransferData = null;
    },
    onResize(index, x, y, width, height) {
      this.myArray2.splice(index, 1, {
        ...this.myArray2[index],
        x,
        y,
        width,
        height
      });
    },
    onDrag(index, x, y) {
      console.log(x, y, index, "on drag.......");
      this.myArray2.splice(index, 1, { ...this.myArray2[index], x, y });
    }
  }
};
</script>

<style>
.section {
  margin-top: 30px;
  margin-bottom: 50px;
}
.drag,
.drop {
  box-sizing: border-box;
  display: inline-block;
  border-radius: 10px;
  width: 100px;
  height: 100px;
  background: #ccc;
  vertical-align: middle;
  margin-right: 20px;
  position: relative;
  padding: 5px;
  padding-top: 35px;
  text-align: center;
  margin: 3px;
}
.drag {
  color: #fff;
  cursor: move;
  background: #777;
  border-right: 2px solid #666;
  border-bottom: 2px solid #666;
}
.drop {
  background: #eee;
  border-top: 2px solid #ccc;
  border-left: 2px solid #ddd;
}
.drag,
.drop {
  display: inline-block;
}
.drop.allowed {
  background-color: #dfd;
}
.container-wrapper {
  width: 100%;
  height: 100vh;
  position: relative;
}
.container {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>
